<template>
  <div class="shop-head">
    <div class="shop-head-left">管理系统</div>
    <div class="shop-head-middle"></div>


    <div class="shop-head-right">


      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
           设置 <el-icon><ArrowDownBold /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item @click="quit">退出系统</el-dropdown-item>

          </el-dropdown-menu>
        </template>
      </el-dropdown>

    </div>
  </div>
</template>

<script>
import { ArrowDownBold } from '@element-plus/icons'
export default {
  name: "Head",
  components:{
    ArrowDownBold
  },
  methods:{
    quit(){
      window.sessionStorage.removeItem("user");
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped lang="less">
.shop-head {
  height: 40px;
  border-bottom: solid #151312 1px;
  display: flex;
  line-height: 40px;

  .shop-head-left {
    width: 200px;
    text-align: center;
    font-weight: bold;
    color: #4b87f3;
  }

  .shop-head-middle {
    flex: 1;
  }

  .shop-head-right {
    width: 200px;
    font-weight: bold;
    text-align: center;
  }

}

</style>